<template>
	<div class="back-color">
	  <div class="re"><img class="img1" :src="Img[0]" /><div style="heigth:100%;background:white"></div>
	    <div class="all">
	      <div class="all-text">
	        <div class="my-question">
	          <div class="title "><img class="my-icon" :src="Icon" /><span class="title-text">理赔问题</span></div>
	          <div @click="Car('车险理赔')"  class="rea" ><img class="img2"  :src="Img[1]"/><div class="text1">车险理赔</div><div class="text2">掌握这几条，车险理赔更容易</div></div>
	          <div class="flex1">
	            <div class="claims-process rea" @click="process('理赔流程')">
	              <img class="img3" :src="Img[2]">
	                <div class="text1">理赔流程</div>
	                <div class="text2">清晰了解如何理赔</div>
	              </img>
	            </div>
	            <div class="claims-material rea" @click="material()">
	              <img class="img4" :src="Img[2]">
	                <div class="text1">理赔材料</div>
	                <div class="text2">理赔材料都有哪些</div>
	              </img>
	            </div>
	          </div>
	        </div>
	        <div class="guide">
	          <div  class="title"><img class="my-icon" :src="Icon" /><span  class="title-text">承保指引</span></div>
	          <div  class="rea"  @click="guide('承保指南')"><img  class="img5" :src="Img[3]"><div class="insured-text1">承保指南</div><div class="insured-text2">保险专家带你读懂承保问题</div> </img></div>
	          <div class="rea" style="margin-top: 7px;"  @click="claims('承保理赔')"><img class="img6" :src="Img[4]"><div class="insured-text1">承保理赔</div><div class="insured-text2">如何进行自动查询</div> </img></div>
	        </div>
	       <div class="wikipedia">
	          <div  class="title"><img class="my-icon" :src="Icon" /><span  class="title-text">保险百科</span></div>
	          <div @click="study('学习保险常识')"  class="rea" >
	            <img class="img7" :src="Img[5]"><div class="common-text1">学习保险常识</div><div class="common-text2">保险概念、保险种类、保险术语</div> </img>
	          </div>
	        </div>
	        <div class="strategy">
	          <div  class="title "><img class="my-icon" :src="Icon"/><span  class="title-text">购保攻略</span></div>
	          <div class="flex2">
	            <div  class="rea"  @click="buyCar('车险购买')" ><img class="img8" :src="Img[6]"/> <div class="text-lan">车险购买</div><div class="text-lan2">买车险，看过来</div></div>
	            <div class="rea" @click="activist('购保维权')" ><img class="img9" :src="Img[6]"/> <div class="text-lan">购保维权</div><div class="text-lan2">消费者投诉指南</div></div>
	          </div>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</template>

<script lang="ts">
	import '../../style/reservaIndex_index.css';
	import 'vant/lib/button/style';
	import 'vant/lib/dialog/style';
	import { Button,Dialog  } from 'vant';
	import { Component, Vue, Prop } from 'vue-property-decorator';
	import { cloudApi } from '@/api/indexApi';
	@Component({
	  components: {
	    [Button.name]: Button,
	    [Dialog.name]: Dialog,
	  },
	})
	export default class MainPage extends Vue{	
		Img:any=[
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/xiong.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/che.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/lv.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/zhinan.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/lipei.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/changshi.png',
			'https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/lan.png',
		];
		Icon:any='https://wechat.chinalife-p.com.cn/viewimages/kzimages/images/imageVue/gou.png'
		created(){
			document.title = '保险知识'
		}
		//车险理赔
		Car(e){	
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})
			  	
		}
		//理赔流程
		process(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}
		//理赔材料
		material(){
			// console.log()
			this.$router.push({path:`cailiao`})		
		}
		//承保指南
		guide(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}
		//承保理赔
	    claims(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}
	    //学习保险常识
		study(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}
		//车险购买
		buyCar(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}
		//购保维权
		activist(e){
			console.log(e)
			this.$router.push({path:`insuranceImg`,query:{id:e}})		
		}

	}
</script>

<style lang="less" scoped>
.back-color{
	background-color: #F6F7FB;
	height: 100%;
	overflow-y: scroll;
}
.my-icon{
  width: 19px;
  height:19px;
  margin-right: 2.5px;
}
.title-text{
  font-size: 17px;
  font-weight: 600;
}
.re{
  position: relative;
}
.rea{
  position: relative;
}
.img1{
  width: 375px;
  height: 234.5px;
}
.all{
  top: 127.5px;
  position: absolute;
  width: 100%;
}
.all-text{
  border-radius: 10px;
  padding: 0px 12.5px 33.5px 12.5px;
  margin: 0px 11px 33.5px 11px;
  background: white;
}
.img2{
  width: 328px;
  height: 67px;
  position: relative;
}
.rea{
	position:relative
}
.text1{
  position: absolute;
  top: 15.5px;
  left: 13.5px;
  font-weight: 500;
  color: #11a788;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
}
.text2{
  position: absolute;
  top: 39px;
  left: 13.5px;
  font-weight: 400;
  color: #11a788;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
}
.insured-text1{
  position: absolute;
  top: 15.5px;
  left: 13.5px;
  font-weight: 500;
  color:#FF9604;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;

}
.insured-text2{
  position: absolute;
  top: 39px;
  left: 13.5px;
  font-weight: 400;
  color: #FF9604;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
}
.common-text1{
  position: absolute;
  top: 15.5px;
  left: 13.5px;
  font-weight: 500;
  color:#EA466C;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;

}
.common-text2{
  position: absolute;
  top: 39px;
  left: 13.5px;
  font-weight: 400;
  color:#EA466C;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
}
.text-lan{
	position: absolute;
	top: 15.5px;
	left: 13.5px;
	font-weight: 500;
	font-family: PingFang SC, PingFang SC-Regular;
	color: #2370f0;
	font-size: 14px;
}
.text-lan2{
	position: absolute;
	top: 39px;
	left: 13.5px;
	font-weight: 400;
	color: #2370f0;
	font-size: 12px;
}
.img3{
  width: 159px;
  height: 67px;
  position: relative;
}
.img4{
  width: 159px;
  height: 67px;
  position: relative;
}
.img5{
  width: 328px;
  height: 67px;
  position: relative;
}
.img6{
  width: 328px;
  height: 67px;
  position: relative;
}
.img7{
  width: 328px;
  height: 67px;
  position: relative;
}
.img8{
  width: 159px;
  height: 67px;
  position: relative;
}
.img9{
  width: 159px;
  height: 67px;  
  position: relative;
}
.title{
  margin-bottom: 19px;
  display: flex;
  align-items: center;
}
.my-question{
  padding-top: 17px;
}
.flex1{
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}
.flex2{
  display: flex;
  justify-content: space-between;
}
.guide{
  margin-top:23.5px;
}
.wikipedia{
  margin-top:23.5px;
}
.strategy{
  margin-top: 23.5px;
}	
</style>
